<template>
  <div>
    <div class="block-content">
      <el-button type="primary" @click="showAdd">新增</el-button>
      <el-dialog
        title="新增学生"
        :visible.sync="formVisible"
        :append-to-body="true">
        <el-form
          :model="form"
          label-width="120px">
          <el-form-item label="学生名">
            <el-input 
              v-model="form.name"
              placeholder="请输入学生名" />
          </el-form-item>
          <el-form-item label="出生日期">
            <el-date-picker
              v-model="form.birthday"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期" />
          </el-form-item>
          <el-form-item label="教育程度">
            <el-select v-model="form.educationType">
              <el-option value="" label="请选择" />
              <el-option 
                v-for="(item, index) in educationList"
                :key="index"
                :label="item.educationName"
                :value="item.educationType" />
            </el-select>
          </el-form-item>
          <el-form-item label="学校">
            <el-select v-model="form.schoolId">
              <el-option value="" label="请选择" />
              <el-option 
                v-for="(item, index) in schoolList"
                :key="index"
                :label="item.schoolName"
                :value="item.schoolId" />
            </el-select>
          </el-form-item>
          <el-form-item label="年级">
            <el-select v-model="form.gradeType">
              <el-option value="" label="请选择" />
              <el-option 
                v-for="(item, index) in gradeList"
                :key="index"
                :label="item.gradeName"
                :value="item.gradeType" />
            </el-select>
          </el-form-item>
          <el-form-item label="班级">
            <el-input 
              v-model="form.classname"
              placeholder="一年级1班" />
          </el-form-item>
          <el-form-item label="联系人">
            <el-input 
              v-model="form.linkman"
              placeholder="请输入联系人" />
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input 
              v-model="form.phone"
              placeholder="请输入联电话" />
          </el-form-item>
          <el-form-item label="联系地址">
            <el-input 
              v-model="form.address"
              placeholder="请输入联地址" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="add">提交</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>  
    </div>
    <div class="block-content">
      <paging-table
        :data="data"
        :total="total">
        <el-table-column 
          label="学生名"
          prop="name"
          width="150" />
        <el-table-column 
          label="学校"
          prop="schoolName"
          width="150" />
      </paging-table>
    </div>
  </div>
</template>

<script>
import PagingTable from '@/components/PagingTable'
import { mapGetters } from 'vuex'

// const studentList = [
//   { 
//     id: 1, studentId: '123', studentName: '小米', birthday: '2016-02-03', 
//     school: {
//       schoolId: '1111',
//       schoolName: '铁锤小学',
//       educationId: 'primary'
//     },
//     grade: {
//       gradeId: '222',
//       gradeName: '四年级'
//     },
//     phone: '13590983994',
//     parent: '老米'
//   }
// ]

const defaultForm = {
  name: '',
  birthday: '1990-01-01',
  linkman: '',
  phone: '',
  address: '',
  educationType: '',
  schoolId: '',
  gradeType: '',
  classname: ''
}

export default {
  data () {
    return {
      data: [],
      total: 10,
      formVisible: false,
      form: Object.assign({}, defaultForm),
      schoolList: [],
      gradeList: []
    }
  },
  computed: {
    ...mapGetters({
      educationList: 'educationList',
      allGradeList: 'gradeList'
    })
  },
  watch: {
    async 'form.educationType' () {
      const value = this.form.educationType
      let gradeList = []
      let schoolList = []
      this.form.schoolId = ''
      this.form.gradeType = ''
      if (value) {
        gradeList = this.allGradeList.filter(item => item.educationType === value)
        const result = await this.$http.get('/school', {
          educationType: value
        })
        schoolList = result.data.slice(0)
      }
      this.gradeList = gradeList
      this.schoolList = schoolList
    }
  },
  methods: {
    showAdd () {
      this.reset()
      this.formVisible = true
    },
    reset () {
      this.form = Object.assign({}, defaultForm)
    },
    async add () {
      const { name, birthday, linkman, phone, address, schoolId, gradeType, classname } = this.form
      if (!name) {
        this.$alert('请输入用户名', '提示')
        return
      }
      if (!birthday) {
        this.$alert('请输入出生日期', '提示')
        return
      }
      if (!linkman) {
        this.$alert('请输入联系人', '提示')
        return
      }
      if (!phone) {
        this.$alert('请输入联系方式', '提示')
        return
      }
      console.log(this.form)
      const result = await this.$http.post('/student', {
        name,
        birthday,
        linkman,
        phone,
        address,
        schoolId,
        gradeType,
        classname
      })
      if (result.code === 200) {
        this.$alert('创建成功', '提示')
      }
    },
    async getList () {
      const result = await this.$http.get('/student')
      const { data } = result
      this.data = data.slice(0)
      console.log(result)
    }
  },
  created () {
    this.getList()
  },
  components: {
    PagingTable
  }  
}
</script>
<style lang="scss" scoped>

</style>
